{% extends "pos/base.html" %}
{% load static %}

{% block content %}

<style>
  .cx-page{padding:16px;}
  .cx-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }
  .cx-title{
    margin:0;
    font-size:24px;
    font-weight:900;
    color:#172b4d;
  }
  .cx-subtitle{
    margin:4px 0 0;
    font-size:13px;
    color:#64748b;
  }
  .cx-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
    padding:14px;
    margin-bottom:14px;
  }
  .cx-summary{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
  }
  .cx-box{
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
  }
  .cx-box .k{
    font-size:12px;
    font-weight:800;
    color:#64748b;
    text-transform:uppercase;
  }
  .cx-box .v{
    font-size:22px;
    font-weight:900;
    color:#0f172a;
    margin-top:4px;
  }
  .cx-filter{
    display:grid;
    grid-template-columns:2fr 1fr 1fr auto;
    gap:10px;
    align-items:end;
  }
  .cx-table-wrap{overflow:auto;}
  .cx-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  .cx-table th{
    background:#f1f5f9;
    color:#334155;
    font-weight:900;
    padding:10px;
    border-bottom:1px solid #e5e7eb;
    white-space:nowrap;
  }
  .cx-table td{
    padding:10px;
    border-bottom:1px solid #eef2f7;
    vertical-align:middle;
    white-space:nowrap;
  }
  .cx-table tfoot td{
    background:#f8fafc;
    font-weight:900;
  }
  .badge-cx{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
  }
  .badge-out{background:#e0e7ff;color:#3730a3;}
  .action-group{
    display:flex;
    gap:6px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .text-right{text-align:right;}
  .text-center{text-align:center;}
  .text-muted{color:#6b7280;}

  @media(max-width:950px){
    .cx-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cx-filter{grid-template-columns:1fr;}
    .cx-header{align-items:flex-start;flex-direction:column;}
  }
</style>

<div class="cx-page">

  <div class="cx-header">
    <div>
      <h1 class="cx-title">Checkout History</h1>
      <p class="cx-subtitle">
        Only checked-out guests. View checkout detail or print final invoice PDF.
      </p>
    </div>

    <div>
      <a class="btn btn-secondary"
         target="_blank"
         href="{% url 'hotel:checkout:checkout_list_pdf' %}?{{ query_string }}">
        Print List PDF
      </a>
    </div>
  </div>

  <div class="cx-summary">
    <div class="cx-box">
      <div class="k">Checked-out Records</div>
      <div class="v">{{ total_records }}</div>
    </div>

    <div class="cx-box">
      <div class="k">Total</div>
      <div class="v">{{ totals.grand_total|floatformat:0 }}</div>
    </div>

    <div class="cx-box">
      <div class="k">Advance</div>
      <div class="v">{{ totals.advance|floatformat:0 }}</div>
    </div>

    <div class="cx-box">
      <div class="k">Checkout Paid</div>
      <div class="v">{{ totals.paid|floatformat:0 }}</div>
    </div>

    <div class="cx-box">
      <div class="k">Balance</div>
      <div class="v">{{ totals.balance|floatformat:0 }}</div>
    </div>
  </div>

  <div class="cx-card">
    <form method="get" class="cx-filter">
      <div>
        <label>Search</label>
        <input type="text"
               name="q"
               value="{{ q }}"
               class="form-control"
               placeholder="Guest, phone, CNIC, passport, T#, booking code">
      </div>

      <div>
        <label>From Checkout</label>
        <input type="date"
               name="from_date"
               value="{{ from_date }}"
               class="form-control">
      </div>

      <div>
        <label>To Checkout</label>
        <input type="date"
               name="to_date"
               value="{{ to_date }}"
               class="form-control">
      </div>

      <div>
        <button type="submit" class="btn btn-dark">Filter</button>
        <a href="{% url 'hotel:checkout:checkout_list' %}" class="btn btn-light">Reset</a>
      </div>
    </form>
  </div>

  <div class="cx-card">
    <div class="cx-table-wrap">
      <table class="cx-table">
        <thead>
          <tr>
            <th>T#</th>
            <th>Invoice</th>
            <th>Guest</th>
            <th>Contact</th>
            <th>Rooms</th>
            <th>Check-in</th>
            <th>Checkout</th>
            <th class="text-right">Total</th>
            <th class="text-right">Advance</th>
            <th class="text-right">Paid</th>
            <th class="text-right">Balance</th>
            <th>Status</th>
            <th class="text-right">Actions</th>
          </tr>
        </thead>

        <tbody>
          {% for row in rows %}
            {% with b=row.booking %}
              <tr>
                <td><strong>T#{{ b.t_id }}</strong></td>
                <td>{{ row.invoice_no|default:"-" }}</td>

                <td>
                  {% if b.guest %}
                    <strong>{{ b.guest.name }}</strong>
                  {% else %}
                    -
                  {% endif %}
                </td>

                <td>
                  {% if b.guest %}
                    {{ b.guest.contact|default:"-" }}
                  {% else %}
                    -
                  {% endif %}
                </td>

                <td>{{ row.rooms }}</td>
                <td>{{ b.checkin_date|date:"d/m/Y" }}</td>
                <td>{{ row.checkout_date|date:"d/m/Y" }}</td>

                <td class="text-right">{{ row.grand_total|floatformat:0 }}</td>
                <td class="text-right">{{ row.advance|floatformat:0 }}</td>
                <td class="text-right">{{ row.paid|floatformat:0 }}</td>
                <td class="text-right">{{ row.balance|floatformat:0 }}</td>

                <td>
                  <span class="badge-cx badge-out">CHECKEDOUT</span>
                </td>

                <td>
                  <div class="action-group">
                    <a class="btn btn-sm btn-info"
                       href="{% url 'hotel:checkout:checkout_detail' b.t_id %}">
                      View
                    </a>

                      <button type="button"
                              class="btn btn-sm btn-success btn-checkout-whatsapp"
                              style="background-color:#25D366;border-color:#25D366;"
                              data-url="{% url 'hotel:checkout:checkout_whatsapp_payload' b.t_id %}">
                        WA
                      </button>

                    <a class="btn btn-sm btn-dark"
                       target="_blank"
                       href="{% url 'hotel:checkout:checkout_pdf' b.t_id %}">
                      Final PDF
                    </a>
                  </div>
                </td>
              </tr>
            {% endwith %}
          {% empty %}
            <tr>
              <td colspan="13" class="text-center text-muted" style="padding:30px;">
                No checked-out records found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <td colspan="7" class="text-right">Total</td>
            <td class="text-right">{{ totals.grand_total|floatformat:0 }}</td>
            <td class="text-right">{{ totals.advance|floatformat:0 }}</td>
            <td class="text-right">{{ totals.paid|floatformat:0 }}</td>
            <td class="text-right">{{ totals.balance|floatformat:0 }}</td>
            <td colspan="2"></td>
          </tr>
        </tfoot>
      </table>
    </div>

    {% if page_obj.has_other_pages %}
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px;">
        {% if page_obj.has_previous %}
          <a class="btn btn-sm btn-light"
             href="?q={{ q }}&from_date={{ from_date }}&to_date={{ to_date }}&page={{ page_obj.previous_page_number }}">
            Previous
          </a>
        {% endif %}

        <span class="btn btn-sm btn-light">
          Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
        </span>

        {% if page_obj.has_next %}
          <a class="btn btn-sm btn-light"
             href="?q={{ q }}&from_date={{ from_date }}&to_date={{ to_date }}&page={{ page_obj.next_page_number }}">
            Next
          </a>
        {% endif %}
      </div>
    {% endif %}
  </div>

</div>

{% endblock %}







{% block javascripts %}
<script>
(function(){

  function replacePlaceholders(template, data) {
    var result = template || '';

    Object.keys(data || {}).forEach(function(key){
      var placeholder = '{' + key + '}';
      result = result.split(placeholder).join(data[key] || '');
    });

    return result;
  }

  function normalizePkPhone(phone) {
    phone = (phone || '').toString().trim();
    phone = phone.replace(/\s+/g, '').replace(/-/g, '').replace(/\+/g, '');

    if (phone.startsWith('0')) {
      phone = '92' + phone.substring(1);
    }

    return phone;
  }

  function getCheckoutFallbackTemplate() {
    return `Dear *{guest_name}*,

Your check-out has been completed successfully ✅

*Final Bill Details:*
━━━━━━━━━━━━━━━
🧾 Invoice No: *{invoice_no}*
🏨 Room No: *{room_no}*
📅 Check-In: {checkin_date}
📅 Check-Out: {checkout_date}
🌙 Nights: {nights}
💰 Total Bill: Rs. {amount}
💵 Advance: Rs. {advance}
💳 Paid: Rs. {paid}
📋 Balance: Rs. {remaining}
━━━━━━━━━━━━━━━

Thank you for staying with *{hotel_name}*.
We hope to see you again!`;
  }

  async function getTemplateText() {
    try {
      var templateResp = await fetch("{% url 'pos:whatsapp_template_get_default' 'hotel_checkout' %}", {
        method: "GET",
        credentials: "same-origin",
        headers: {
          "X-Requested-With": "XMLHttpRequest"
        }
      });

      var templateData = await templateResp.json();

      if (templateData.ok && templateData.template_text) {
        return templateData.template_text;
      }
    } catch (e) {
      console.warn("Template fetch failed:", e);
    }

    return getCheckoutFallbackTemplate();
  }

  async function sendCheckoutWhatsApp__(payloadUrl, btn) {
    var oldHtml = btn ? btn.innerHTML : "";

    try {
      if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Sending';
      }

      var resp = await fetch(payloadUrl, {
        method: "GET",
        credentials: "same-origin",
        headers: {
          "X-Requested-With": "XMLHttpRequest"
        }
      });

      var data = await resp.json();

      if (!resp.ok || !data.ok) {
        throw new Error(data.error || "Payload error");
      }

      if (!data.guest_phone) {
        alert("Guest contact number missing.");
        return;
      }

      var templateText = await getTemplateText();

      var msg = replacePlaceholders(templateText, {
        hotel_name: data.hotel_name || "Hotel",

        guest_name: data.guest_name || data.guest_name || "Guest",
        guest_name: data.guest_name || data.guest_name || "Guest",
        mobile: data.guest_phone || "",

        booking_no: data.booking_no || "",
        invoice_no: data.invoice_no || "",
        room_no: data.room_no || "",

        checkin_date: data.checkin_date || "",
        checkout_date: data.checkout_date || "",
        nights: data.nights || "",

        amount: data.amount || "0",
        advance: data.advance || "0",
        paid: data.paid || "0",
        remaining: data.remaining || "0",
        refund: data.refund || "0",

        date: data.date || "",
        address: data.address || "",
        remarks: data.remarks || ""
      });

      msg += `

━━━━━━━━━━━━━━━
_Automated Message from Blue Primes Software (blueprimes.com)_`;

      var waFD = new FormData();
      waFD.append("phone", normalizePkPhone(data.guest_phone));
      waFD.append("message", msg);

      var waResp = await fetch("http://localhost:3000/api/send-media", {
        method: "POST",
        body: waFD
      });

      var waData = await waResp.json();

      if (waData.success) {
        alert("✅ Checkout WhatsApp sent to " + (data.guest_name || data.guest_name || "Guest"));
      } else {
        alert("WhatsApp failed: " + (waData.error || "Unknown error"));
      }

    } catch (err) {
      console.error(err);
      alert("WhatsApp send error: " + err.message);
    } finally {
      if (btn) {
        btn.disabled = false;
        btn.innerHTML = oldHtml;
      }
    }
  }
  async function sendCheckoutWhatsApp(payloadUrl, btn) {
  var oldHtml = btn ? btn.innerHTML : "";

  try {
    if (btn) {
      btn.disabled = true;
      btn.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Sending PDF...';
    }

    // ================================
    // 1) Get checkout payload from Django
    // ================================
    var resp = await fetch(payloadUrl, {
      method: "GET",
      credentials: "same-origin",
      headers: {
        "X-Requested-With": "XMLHttpRequest"
      }
    });

    var data = await resp.json();

    if (!resp.ok || !data.ok) {
      throw new Error(data.error || "Payload error");
    }

    if (!data.guest_phone) {
      alert("Guest contact number missing.");
      return;
    }

    // ================================
    // 2) Build WhatsApp message
    // ================================
    var templateText = await getTemplateText();

    var msg = replacePlaceholders(templateText, {
      hotel_name: data.hotel_name || data.shop_name || "Hotel",
      shop_name: data.shop_name || data.hotel_name || "Hotel",

      guest_name: data.guest_name || "Guest",
      mobile: data.guest_phone || "",

      booking_no: data.booking_no || "",
      invoice_no: data.invoice_no || "",
      room_no: data.room_no || "",

      checkin_date: data.checkin_date || "",
      checkout_date: data.checkout_date || "",
      nights: data.nights || "",

      amount: data.amount || "0",
      advance: data.advance || "0",
      paid: data.paid || "0",
      remaining: data.remaining || "0",
      refund: data.refund || "0",

      date: data.date || "",
      address: data.address || data.shop_address || "",
      remarks: data.remarks || data.shop_remarks || data.shop_footer || ""
    });

    msg += `

━━━━━━━━━━━━━━━
_Attached: Final checkout invoice PDF_
_Automated Message from Blue Primes Software (blueprimes.com)_`;

    // ================================
    // 3) Prepare WhatsApp FormData
    // ================================
    var waFD = new FormData();
    waFD.append("phone", normalizePkPhone(data.guest_phone));
    waFD.append("message", msg);

    // ================================
    // 4) Fetch checkout PDF and attach
    // ================================
    if (data.pdf_url) {
      var pdfUrl = data.pdf_url;

      if (pdfUrl.startsWith("/")) {
        pdfUrl = window.location.origin + pdfUrl;
      }

      var pdfResp = await fetch(pdfUrl, {
        method: "GET",
        credentials: "same-origin",
        headers: {
          "X-Requested-With": "XMLHttpRequest"
        }
      });

      if (!pdfResp.ok) {
        throw new Error("Checkout PDF fetch failed.");
      }

      var pdfBlob = await pdfResp.blob();

      if (!pdfBlob || pdfBlob.size <= 0) {
        throw new Error("Checkout PDF file is empty.");
      }

      var invoiceNo = (data.invoice_no || data.booking_no || data.booking_t_id || "checkout")
        .toString()
        .replace(/[^a-zA-Z0-9_-]/g, "_");

      var pdfFile = new File(
        [pdfBlob],
        "checkout_invoice_" + invoiceNo + ".pdf",
        { type: "application/pdf" }
      );

      waFD.append("attachment", pdfFile);

      console.log("Checkout PDF attached:", pdfFile.name, pdfFile.size);
    } else {
      throw new Error("Checkout PDF URL missing in payload.");
    }

    // ================================
    // 5) Send WhatsApp message + PDF
    // ================================
    var waResp = await fetch("http://localhost:3000/api/send-media", {
      method: "POST",
      body: waFD
    });

    var waData = await waResp.json();

    if (waData.success) {
      alert("✅ Checkout WhatsApp message + PDF sent to " + (data.guest_name || "Guest"));
    } else {
      alert("WhatsApp failed: " + (waData.error || "Unknown error"));
    }

  } catch (err) {
    console.error(err);
    alert("WhatsApp send error: " + err.message);
  } finally {
    if (btn) {
      btn.disabled = false;
      btn.innerHTML = oldHtml;
    }
  }
}

  document.addEventListener("click", function(e){
    var btn = e.target.closest(".btn-checkout-whatsapp");
    if (!btn) return;

    e.preventDefault();

    var url = btn.getAttribute("data-url");
    if (!url) {
      alert("WhatsApp payload URL missing.");
      return;
    }

    sendCheckoutWhatsApp(url, btn);
  });

})();
</script>
{% endblock %}